<template>
    <div class="device-list">
        <div class="device-list-container flex-container">

            <div class="panel-list">

                <el-row class="item-panel">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="tab-content">
                        <el-tab-pane label="商品标签" name="first">
                            <div class="device-list-table">
                                <el-row>
                                    <el-col :span="24">
                                        <el-table :data="tpCodeList" border>

                                            <el-table-column label="ID" prop="id" width="120"></el-table-column>

                                            <el-table-column label="Name" prop="name" min-width="150"></el-table-column>
                                            <el-table-column label="Value" prop="value"></el-table-column>
                                            <el-table-column label="Code" prop="code" min-width="150"></el-table-column>
                                            <el-table-column label="操作" fixed="right" width="200">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="danger outline"
                                                               @click="handleDelete(scope.$index, scope.row)">
                                                        删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>

                            <div class="flex-footer">
                                <div class="flex-footer-content">
                                    <el-row class="">
                                        <el-col :span="8" class="pt-6">
                                            &nbsp;
                                            <el-button type="success" @click="handleAdd()">新增</el-button>
                                        </el-col>
                                        <el-col :span="16" class="text-right" v-if="total > 0">
                                          &nbsp;
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="疾病知识标签" name="second">
                            <div class="device-list-table">
                                <el-row>
                                    <el-col :span="24">
                                        <el-table :data="tpCodeList" border>

                                            <el-table-column label="ID" prop="id" width="120"></el-table-column>

                                            <el-table-column label="Name" prop="name" min-width="150"></el-table-column>
                                            <el-table-column label="Value" prop="value"></el-table-column>
                                            <el-table-column label="Code" prop="code" min-width="150"></el-table-column>
                                            <el-table-column label="操作" fixed="right" width="200">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="danger outline"
                                                               @click="handleDelete(scope.$index, scope.row)">
                                                        删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>

                            <div class="flex-footer">
                                <div class="flex-footer-content">
                                    <el-row class="">
                                        <el-col :span="8" class="pt-6">
                                            &nbsp;
                                            <el-button type="success" @click="handleAdd()">新增</el-button>
                                        </el-col>
                                        <el-col :span="16" class="text-right" v-if="total > 0">
                                            &nbsp;
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-tab-pane>

                        <!--todo VIP标签-->
                        <!--<el-tab-pane label="VIP标签" name="third">-->
                            <!--<div class="device-list-table">-->
                                <!--<el-row>-->
                                    <!--<el-col :span="24">-->
                                        <!--<el-table :data="tpCodeList" border>-->

                                            <!--<el-table-column label="ID" prop="id" width="120"></el-table-column>-->

                                            <!--<el-table-column label="Name" prop="name" min-width="150"></el-table-column>-->
                                            <!--<el-table-column label="Value" prop="value"></el-table-column>-->
                                            <!--<el-table-column label="Code" prop="code" min-width="150"></el-table-column>-->
                                            <!--<el-table-column label="操作" fixed="right" width="200">-->
                                                <!--<template slot-scope="scope">-->
                                                    <!--<el-button size="mini" type="danger outline"-->
                                                               <!--@click="handleDelete(scope.$index, scope.row)">-->
                                                        <!--删除-->
                                                    <!--</el-button>-->
                                                <!--</template>-->
                                            <!--</el-table-column>-->
                                        <!--</el-table>-->
                                    <!--</el-col>-->
                                <!--</el-row>-->
                            <!--</div>-->

                            <!--<div class="flex-footer">-->
                                <!--<div class="flex-footer-content">-->
                                    <!--<el-row class="">-->
                                        <!--<el-col :span="8" class="pt-6">-->
                                            <!--&nbsp;-->
                                            <!--<el-button type="success" @click="handleAdd()">新增</el-button>-->
                                        <!--</el-col>-->
                                        <!--<el-col :span="16" class="text-right" v-if="total > 0">-->
                                            <!--&nbsp;-->
                                        <!--</el-col>-->
                                    <!--</el-row>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</el-tab-pane>-->

                    </el-tabs>

                </el-row>
            </div>


        </div>

        <!--编辑弹窗-->
        <el-dialog title="编辑" custom-class="edit-dialog" :visible.sync="editModalVisible">
            <el-form :label-position="'left'" label-width="110px" ref="userForm" :model="tpCodeForm">

                <el-form-item label="Value">
                    <el-input v-model="tpCodeForm.value" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="code">
                    <el-input v-model="tpCodeForm.code" type="number"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="handleSave('tpCodeForm')">确认更新</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script type="text/ecmascript-6">

    import Core from 'core/core'

    export default {
        data() {
            return {
                activeName: "first",
                editModalVisible: false,
                tpCodeForm: {
                    name: "",
                    code: "",
                    value: ""
                },
                searchForm: {
                    name: ""
                },
                name: "goods_label",
                tpCodeList: [],
                tpCodeNameList: [],

                // 分页配置
                currentPage: 1,
                total: 0,
                pageSize: 10,
            }
        },
        mounted: function () {
            this._tpCodeList();

            // this._tpCodeNameList();
        },

        methods: {
            clearSearchOption() {
                this.searchForm = {
                    name: ""
                };
                this._tpCodeList();
            },
            _tpCodeList() {
                Core.Api.TpCode.listAllByName(this.name)
                    .then(res => {
                        this.tpCodeList = res.list;
                    })
                    .catch(err => {})
            },

            _tpCodeNameList() {
                Core.Api.TpCode.nameList()
                    .then(res => {
                        this.tpCodeNameList = res.list;
                    })
                    .catch(err => {})
            },

            pageChange(val) {
                this.currentPage = val;
                this._tpCodeList();
            },

            handleAdd() {
                this.editModalVisible = true;
            },

            handleSave() {

                Core.Api.TpCode.saveTpCode(
                    this.name,
                    this.tpCodeForm.code,
                    this.tpCodeForm.value
                )
                    .then(res => {
                        this.editModalVisible = false;
                        this._tpCodeList();
                    })
            },

            handleDelete(index, row) {
                this.$alert('确认删除吗?', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if (action == 'confirm') {
                            Core.Api.TpCode.deleteTpCode(row.id)
                                .then(res => {

                                    this.$message.success("删除成功");
                                    this._tpCodeList();
                                })
                        }
                    }
                });
            },

            handleClick(tab) {
                console.log(tab)
                let type = tab.$options.propsData['name'];
                if (type === 'first') {
                    this.name = "goods_label";
                }
                if (type === "second") {
                    this.name = 'post_label';
                }
                if (type === 'third') {
                    this.name = 'user_vip_level';
                }

                this._tpCodeList();
            }

        }
    }
</script>

<style scoped lang="scss">
    .device-list {
        height: 100%;
        .device-list-container {
            height: 100%;
            .search-row {
                margin: 0;
                padding: 15px 30px;
                background: #fff;
                .el-form--inline .el-form-item {
                    margin-bottom: 0;
                }
                .el-form-item__label {
                    padding-right: 10px;
                    font-size: 12px;
                }
                .el-form-item__content {
                    .el-input {
                        width: 175px;
                    }
                }
            }

            .device-list-table {
                padding: 20px 0;
                background: #ffffff;
                position: relative;
                flex: 1;
                overflow: auto;
                .all-select-holder {
                    line-height: 30px;
                    position: absolute;
                    left: 10px;
                    z-index: 10;
                }
            }
            .flex-footer {
                border-top: 1px solid #E0E7EF;
            }
            .flex-footer.h-80 {
                height: 80px;
            }

        }

        .panel-list {
            padding-top: 20px;
            background: #fff;

            .item-panel {
                .tab-content {
                    padding: 0 20px;
                }
            }
        }

        a.success {
            display: inline-block;
            color: #fff;
            background-color: #03CC75;
            border-color: #03CC75;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 7px 16px;
            font-size: 12px;
            border-radius: 4px;
            margin: 0 10px;
        }

        .upload-device {
            display: inline-block;
        }
    }
</style>
